﻿<template>
  <div class="training-logs">
    <div class="page-header neon-border">
      <h1 class="page-title gradient-text">📝 训练日志</h1>
      <p class="page-desc">联邦学习训练过程详细日志记录</p>
    </div>

    <div class="logs-content">
      <div class="logs-controls glass-card">
        <div class="controls-left">
          <el-button class="tech-button" @click="refreshLogs">
            🔄 刷新日志
          </el-button>
          <el-button class="tech-button" @click="clearLogs">
            🗑️ 清空日志
          </el-button>
        </div>
        <div class="controls-right">
          <el-select v-model="logLevel" class="tech-select" placeholder="日志级别">
            <el-option label="全部" value="all"></el-option>
            <el-option label="信息" value="info"></el-option>
            <el-option label="警告" value="warn"></el-option>
            <el-option label="错误" value="error"></el-option>
          </el-select>
        </div>
      </div>

      <div class="logs-list glass-card">
        <div class="log-item" v-for="log in filteredLogs" :key="log.id" :class="log.level">
          <div class="log-time">{{ log.time }}</div>
          <div class="log-level" :class="log.level">
            [{{ log.level.toUpperCase() }}]
          </div>
          <div class="log-message">{{ log.message }}</div>
          <div class="log-source">{{ log.source }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const logLevel = ref('all')

const logs = ref([
  { id: 1, time: '15:00:12', level: 'info', message: '联邦学习训练已开始', source: 'TrainingScheduler' },
  { id: 2, time: '15:00:15', level: 'info', message: '设备 Edge-Node-01 已连接', source: 'DeviceManager' },
  { id: 3, time: '15:00:18', level: 'warn', message: '设备 Edge-Node-03 响应延迟较高', source: 'NetworkMonitor' },
  { id: 4, time: '15:00:22', level: 'info', message: '第1轮模型聚合完成', source: 'Aggregator' },
  { id: 5, time: '15:00:25', level: 'error', message: '设备 Edge-Node-05 连接失败', source: 'DeviceManager' },
  { id: 6, time: '15:00:30', level: 'info', message: '全局准确率更新: 85.6%', source: 'MetricsCollector' }
])

const filteredLogs = computed(() => {
  if (logLevel.value === 'all') return logs.value
  return logs.value.filter(log => log.level === logLevel.value)
})

const refreshLogs = () => {
  // 模拟刷新日志
  console.log('刷新日志')
}

const clearLogs = () => {
  logs.value = []
}
</script>

<style scoped>
.logs-content {
  padding: 20px;
}

.logs-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.controls-left, .controls-right {
  display: flex;
  gap: 10px;
}

.tech-select {
  width: 120px;
}

.logs-list {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.log-item {
  display: grid;
  grid-template-columns: 80px 80px 1fr 150px;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: #00f2fe;
}

.log-level {
  font-weight: bold;
}

.log-level.info {
  color: #00ff88;
}

.log-level.warn {
  color: #ffd166;
}

.log-level.error {
  color: #ff6b6b;
}

.log-message {
  color: #fff;
}

.log-source {
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* 滚动条样式 */
.logs-list::-webkit-scrollbar {
  width: 6px;
}

.logs-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.logs-list::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  border-radius: 3px;
}
</style>